<template>
  <a-modal
    :maskClosable="false"
    :destroyOnClose="true"
    :title="action === 'approval' ? '会员续费审核' : '会员续费详情'"
    centered
    :width="800"
    v-model="visible"
  >
    <a-form-model ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="会员名称" class="_mb-5">
        <span>{{ form.memberName }}</span>
      </a-form-model-item>
      <a-form-model-item label="到期时间" class="_mb-5">
        <span>{{ memberInfo.memberEndTime }}</span>
      </a-form-model-item>
      <a-form-model-item label="缴费状态" class="_mb-5">
        <DictTag :options="Dict.getLocal('paymentStatusDict')" :value="memberInfo.paymentStatus" />
      </a-form-model-item>
      <a-form-model-item label="原职务" class="_mb-5">
        <span>{{ form.levelName }}</span>
      </a-form-model-item>
      <a-form-model-item label="本期职务" :class="{ '_mb-5': disabled }">
        <a-select v-model="form.nowLevelId" :disabled="disabled">
          <a-select-option v-for="item in levelList" :value="item.id" :key="item.id">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="缴费标准" class="_mb-5">
        <span>{{ membershipFees || 0 }}元/{{ allottedTime }}月</span>
      </a-form-model-item>
      <a-form-model-item label="实缴金额（￥）" :class="{ '_mb-5': disabled }">
        <a-input v-model="form.payMoney" :disabled="disabled" />
      </a-form-model-item>
      <a-form-model-item label="本期缴费开始" :class="{ '_mb-5': disabled }">
        <a-date-picker v-model="form.startTime" :disabled="disabled" />
      </a-form-model-item>
      <a-form-model-item label="本期缴费至" :class="{ '_mb-5': disabled }">
        <a-date-picker v-model="form.endTime" :disabled="disabled" />
      </a-form-model-item>
      <a-form-model-item label="缴费凭证" :class="{ '_mb-5': disabled }">
        <template v-if="disabled ? !!form.paymentVoucher : true">
          <UploadImg v-model="form.paymentVoucher" :disabled="disabled" />
        </template>
      </a-form-model-item>
    </a-form-model>
    <template slot="footer">
      <template v-if="action === 'approval'">
        <a-button @click="handleShowModal(2, '缴费驳回', '非必填，请输入驳回原因，引导会员重新提交')">驳回</a-button>
        <a-button
          class="_ml-10"
          type="primary"
          @click="
            handleShowModal(
              1,
              '缴费通过',
              '非必填，请输入指引会员下一步操作的提示语，例如加管理员，加会员群，完善名片等'
            )
          "
          >审核通过</a-button
        >
      </template>
      <a-button v-else type="primary" @click="visible = false">确定</a-button>
    </template>
    <ApprovalModal ref="ApprovalModal" :type="1" @success="operateCallBack" />
  </a-modal>
</template>

<script>
import ApprovalModal from '@/views/member/components/modal/approvalModal'
import { memberApplyReview, PaymenrecordInfo, MemberSettingInfo } from '@/api/member/member'
import { getList } from '@/api/member/memberType'
import UploadImg from '@/components/UpFile/uploadImg'
import DictTag from '@/components/DictTag'

export default {
  components: {
    ApprovalModal,
    UploadImg,
    DictTag,
  },
  data() {
    return {
      visible: false,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      id: undefined,
      form: {
        id: undefined,
        memberName: undefined,
        levelId: undefined,
        levelName: undefined,
        nowLevelId: undefined,
        payMoney: undefined,
        startTime: undefined,
        endTime: undefined,
        paymentVoucher: undefined,
      },
      type: 2,
      action: 'detail',
      disabled: true,
      levelList: [],
      membershipFees: 0,
      allottedTime: 12,
      memberInfo: {},
      memberId: undefined,
    }
  },
  filters: {
    filterAllottedTime(val) {
      return (val && val / 12) 
    },
  },
  methods: {
    async show(data) {
      let { id, memberId, action } = data
      this.id = id
      this.memberId = memberId
      this.action = action
      this.visible = true
      await this.getLevelList()
      this.getMemberSettingInfo()
      this.getPaymenrecordInfo()
    },
    handleShowModal(status, title, placeholder) {
      this.$refs.ApprovalModal.show({
        id: this.id,
        status,
        title,
        placeholder,
      })
    },
    async getPaymenrecordInfo() {
      let res = await PaymenrecordInfo(this.id)
      Object.keys(this.form).forEach((k) => {
        this.form[k] = res.data[k]
      })
      this.handleLevelSelect(this.form.nowLevelId)
      console.log('res--->', res)
    },
    async getLevelList() {
      let res = await getList()
      this.levelList = res.data || []
    },
    handleLevelSelect(val) {
      let item = this.levelList.find((f) => f.id === val) || {}
      this.membershipFees = item.membershipFees || 0
      this.allottedTime = item.allottedTime || 12
    },
    async getMemberSettingInfo() {
      let res = await MemberSettingInfo(this.memberId)
      this.memberInfo = res.data || {}
    },
    // 审核成功
    operateCallBack() {
      this.visible = false
      this.$emit('success')
    },
  },
  async created() {},
}
</script>

<style scoped>
.title {
  margin-left: calc(25% - 80px);
  font-weight: bold;
  font-size: 18px;
  padding: 20px 0;
}
</style>
